<template>
    <div>
      <div style="float: left">
        <div style="float: left">
          <el-button type="primary" @click="dialogVisible = true" style="color: blue;float: left"><i class="el-icon-plus" >新建</i></el-button>
        </div>
        <!--查询-->
        <div style="float: left;align-content: center">
          <input type="text" value="根据名称模糊查" placeholder="请输入申请表id号查询对应人评估表" style="width: 250px;float: left;margin-top: 7px;margin-left: 700px" v-model="input">
          <!--申请表id查，证件部分模糊查-->
          <el-button type="primary" icon="el-icon-search" style="background-color: coral;height: 35px;float: left;margin-left: 5px" @click="findAllByBorrowerId">查询</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%;align-content: center">
        <el-table-column
          prop="borrowerId"
          label="申请id"
          sortable
          width="80">
        </el-table-column>

        <el-table-column
          prop="certificateName"
          label="贷款证件"
          width="300">
        </el-table-column>


        <el-table-column
          type="datetime"
          prop="assessTime"
          label="评估日期"
          sortable
          format="yyyy - MM - dd  HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          width="150">

          <!--<template slot-scope="tableData">
            <span>{{assessTime | FormatDate('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>-->
        </el-table-column>
        <el-table-column
          prop="certificatePhoto"
          label="证件证明照片"  width="120">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.certificatePhoto"
              fit="fit"></el-image>
          </template>
        </el-table-column>

        <el-table-column
          prop="assessMent"
          label="评估额度（证件越全，额度越高）"
          width="300">
        </el-table-column>

        <el-table-column
          prop="reserve"
          label="备注1"
          width="80">
          <!--
                <template slot-scope="scope">
                  <span v-if="scope.row.rate>=5.0">高</span>
                  <span v-if="scope.row.rate<=4.9">低</span>
                </template>-->

        </el-table-column>

        <el-table-column
          prop="reserve1"
          label="备注2"
          width="80">
        </el-table-column>


        <el-table-column
          fixed="right"
          label="操作"
          width="140">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="deleteByAssetsappraisalId(scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <el-dialog

        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">

          <!--   <el-form-item label="隐藏id">
               <el-input v-model="form.id" placeholder="ID号" type="hidden"></el-input>
             </el-form-item>-->

          <el-form-item label="申请id">
            <el-input v-model="form.borrowerId" placeholder="申请的ID号"></el-input>
          </el-form-item>


          <el-form-item label="贷款证名" >
            <el-input v-model="form.certificateName" placeholder="申请的相应证书"></el-input>
          </el-form-item>

          <!--upload无则上传图片-->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/credit-borrower/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"


            v-if="this.form.certificatePhoto!=null">

            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:5px; height: 5px;background-color: coral">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!--自我欺骗有照片则增-->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/credit-borrower/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"


            v-if="this.form.certificatePhoto==null">
            <!--自我欺骗-->
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:10px; height: 10px">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!--图片-->
          <!--  <el-image
              style="width: 300px; height: 150px"
              :src=this.form.certificatePhoto
              fit="fill"
              v-if="this.form.certificatePhoto!=null">
            </el-image>-->

          <el-form-item label="证件证明照片">
            <el-image
              style="width: 100px; height: 100px"
              :src="form.certificatePhoto"
              fit="fit"></el-image>
          </el-form-item>



          <el-form-item label="活动时间">
            <!--<el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.assessTime" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">  </el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="form.assessTime" style="width: 100%;"></el-time-picker>
            </el-col>-->
            <el-date-picker
              type="datetime"
              default-value
              placeholder="选择日期"
              v-model="form.assessTime"
              format="yyyy - MM - dd  HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>



          <el-form-item label="评估额度" >
            <el-input v-model="form.assessMent" placeholder="请输入评估后的金额"></el-input>
          </el-form-item>

          <el-form-item label="备注" >
            <el-input v-model="form.reserve" placeholder="备注"></el-input>
          </el-form-item>

          <el-form-item label="备注2" >
            <el-input v-model="form.reserve1" placeholder="备注"></el-input>
          </el-form-item>
        </el-form>




        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
      </el-dialog>
    </div>


  </template>
  <script>

    import axios from  'axios'

    export default {
      name: 'assetsappraisal',
      data () {
        return {

          tableData: [],
          dialogVisible:false,
          form: {

          },
          imageUrl:'',
          input:'',
          /* assessTime1:assessTime.+8*3600*1000,*/
        }
      },
      methods:{
        //显示当前时间（年月日时分秒）


        //默认当前时间
        getCurrentTime () {
          let date = new Date()
          let Y = date.getFullYear()
          let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
          let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
          let hours = date.getHours()
          let minutes = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
          let seconds = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
          date = Y + '-' + M + '-' + D + ' ' + hours + ':' + minutes + ':' + seconds
          console.log(date)  //2020-11-07 16:43:25
          return date
        },

        handleClick(row) {
          axios.post("http://localhost:9999/credit-borrower/findByAssetsappraisalId",{id:row.id}).then(res=>{


            this.dialogVisible=true;
            this.form=res.data;
          })
        },
        deleteByAssetsappraisalId:function (row) {
          axios.post("http://localhost:9999/credit-borrower/deleteByAssetsappraisalId",{id:row.id}).then(res=> {


            if (res.data=="success") {

              alert("即将删除申请表"+row.borrowerId+"号！")
              this.findAll();

            } else
              alert("删除失败！")
          })
        },

        findAll:function () {
          axios.get("http://localhost:9999/credit-borrower/findAllAssetsappraisal").then(res=>{

            this.tableData=res.data;
            console.log(res.data);
          })
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        onSubmit() {
          console.log(this.form);
          axios.post("http://localhost:9999/credit-borrower/saveOrUpdateAssetsappraisal",this.form).then(res=>{
              // this.form.assessTime=getCurrentTime();
            this.dialogVisible = false;
            if(res.data=="success"){
              // this.form.assessTime=getCurrentTime();
              // alert(res.data.assessTime)
             // console.log(res.data)
              this.findAll();
            }else{
              alert("修改失败！")
            }
          })
        },


        findAllByBorrowerId:function(){
          axios.post("http://localhost:9999/credit-borrower/findAllByBorrowerId", {borrowerId:this.input}).then(res=>{
            this.form = res.data;
            alert("查到"+res.data.length+"条数据")

            console.log(res.data)
            this.tableData = res.data

          })
        },
//模糊查询证书和申请id
        /*  findAllByBorrowerId:function(certificateName){
            /!* this.dialogVisible=true*!/
            axios.post("http://localhost:9999/credit-loanapplication/findByCertificateName",{certificateName:this.input}).then(res=>{
              this.form=res.data;
              alert("查申请号"+res.data)
              console.log(res.data)
              /!* this.findAll();*!/
            })
          },
    */


        handleAvatarSuccess(res, file) {
          this.form.certificatePhoto=res;
          this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }

      },
      mounted(){
        this.findAll();

      }
    }
  </script>
